<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />
		<script src="../js/CHN.js"></script>
		<script src="../js/ENG.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body,
			html {
				width: 100%;
				margin: auto;
			}
			
			#wrap {
				width: 910px;
				height: 725px;
				/*border: 1px solid black;*/
				margin: 0 auto;
			}
			
			#head {
				width: 910px;
				height: 100px;
				margin-top: 35px;
			}
			
			#language {
				width: 734px;
				/*height: 26px;*/
				margin-left: 190px;
			}
			
			#language>p {
				/*width: 360px;*/
				/*height: 26px;*/
				display: inline-block;
				margin-left: 360px;
			}
			
			#xuanze {
				width: 215px;
				height: 25px;
			}
			
			#language>span {
				font-size: 10px;
			}
			
			#language>p>a {
				color: #006600;
				text-decoration: none;
				font-size: 10px;
				font-weight: 700;
			}
			
			#nav {
				width: 920px;
				height: 100px;
				background: url(../img/img/head_bg.jpg)no-repeat;
				background-position-x: 180px;
				margin-top: -25px;
				position: relative;
				/*border: 1px solid black;*/
			}
			
			.nav>li {
				width: 146px;
				height: 100px;
				/*border: 1px solid black;*/
				background: url(../img/img/menu_part.gif)no-repeat;
				background-position-y: 34px;
				background-position-x: 144px;
				display: inline-block;
				list-style: none;
				float: left;
				text-align: center;
				line-height: 100px;
				margin-top: -26px;
				margin-left: 1px;
			}
			
			.nav {
				width: 920px;
				height: 100px;
				/*border: 1px solid black;*/
				margin-top: 0px;
				line-height: 100px;
			}
			
			.nav>li>a {
				text-decoration: none;
				color: white;
				font-size: 15px;
			}
			
			.nav>li>a:hover {
				color: yellow;
			}
			
			#middle {
				width: 910px;
				height: 370px;
				/*border: 1px solid black;*/
				margin-top: 10px;
			}
			
			#lbt {
				width: 606px;
				height: 360px;
				/*border: 1px solid black;*/
				overflow: hidden;
				position: relative;
			}
			
			#lbt>img {
				width: 606px;
				height: 360px;
				float: left;
			}
			
			#banner {
				width: 606px;
				height: 360px;
				position: absolute;
			}
			
			#left,
			#right {
				text-align: center;
				width: 30px;
				height: 40px;
				background: gray;
				position: absolute;
				margin-top: 150px;
				z-index: 10;
				font-size: 30px;
				color: white;
				font-weight: 700;
				line-height: 40px;
				margin-left: 20px;
				opacity: 0.4;
				display: none;
			}
			
			#right {
				margin-left: 560px;
			}
			
			#footer {
				width: 910px;
				height: 225px;
				margin-top: 10px;
			}
			
			#footer div {
				width: 890px;
				height: 95px;
				margin-left: 15px;
				position: relative;
			}
			
			#footer p {
				text-align: center;
			}
			
			#footer>p>a {
				color: #0F5A27;
				font-size: 10px;
				text-decoration: none;
			}
			
			#footer:nth-child(3) {
				color: #0F5A27;
				font-size: 10px;
				margin-top: 20px;
			}
			
			#slider {
				width: 220px;
				border: 1px solid black;
				z-index: 10;
				position: absolute;
				top: 69px;
				left: 325px;
				display: none;
			}
			#slider>div{
				width:220px;
				height: 35px;
				background: #008000;
				/*float: left;*/
			}
			#slider>div>a {
				width: 220px;
				height: 35px;
				list-style: none;
				border: 1px solid #E1ECE3 !important;
				text-decoration: none;
				color: white;
				font-weight: 200;
				/*display: inline-block;*/
				/*line-height: 35px;*/
				/*margin-left: 10px;*/
				float: left;
				z-index: 10000 !important;
			}
			

			#slider>div>a:hover {
				color: yellow;
			}
			
			#show {
				width: 287px;
				height: 360px;
				/*border: 1px solid black;*/
				float: right;
				border-radius: 10px;
				position: relative;
				background: url(../img/img/pic1.jpg);
				overflow: hidden;
			}
			
			.textBig {
				position: absolute;
				left: -280px;
				top: 35px;
			}
			
			.textSmall {
				position: absolute;
				left: -288px;
				top: 111px;
			}
			
			.imgBig {
				position: absolute;
				top: -158px;
			}
			
			#erweima {
				position: absolute;
				left: 640px;
				top: -240px;
				display: none;
			}
			
		
		</style>
	</head>

	<body>
		<div id="wrap">
			<!--头部-->
			<div id="head">

				<!--导航蓝-->
				<div id="nav">
					<div id="language">
						<span>中国</span>
						<p>
							<select id="xuanze" onchange="setLanguage(this)">
								<option value="">select lanugage</option>
								<option value="chn">chinese</option>
								<option value="eng">english</option>
							</select>
							<a href="http://www.subway.com/nogeo">|&nbsp;进入全球官网</a>
						</p>
					</div>
					
					<ul class="nav">
						<li style="width: 180px;">
							<a href="1首页.html"><img src="../img/img/logo.jpg" /></a>
						</li>
						<li>
							<a href="新闻动态.html">新闻动态</a>
						</li>
						<li id="lan">
							<a href="美食.html">美食与营养</a>
							<div id="slider">

									<div><a href="">超值 value</a></div>

									<div><a href="">经典 Classics</a></div>

									<div><a href="">精选 Premlum</a></div>

									<div><a href="">低脂 Low Fat</a></div>

									<div><a href="">百味卷 Wrap</a></div>

									<div><a href="">沙拉 Salad</a></div>

									<div><a href="">聚餐服务 Cartring</a></div>

									<div><a href="">饮料和小食 Drings和Slide</a></div>

									<div><a href="">早餐 BREAKFIRST</a></div>
									<div><a href="">营养 Nutrltion</a></div>

									<div><a href="">如何点餐 How To Order</a></div>
							</div>
						</li>
						<li>
							<a href="加盟流程.html">加盟流程</a>
						</li>
						<li>
							<a href="关于我们.html">关于我们</a>
						</li>
						<li style="background: url(../img/img/menu-bg-last.gif)no-repeat; background-position-y: 34px;background-position-x: 0px;margin-left: -1px;">
							<a href="">快餐店位置查询</a>
						</li>
					</ul>
				</div>
			</div>
			<!--轮播图-->
			<div id="middle">
				<!--左边广告轮播图-->
				<div id="banner">
					<div id="lbt">
						<div id="left"></div>
						<div id="right"></div>
						<img id="lbt_img1" src="../img/2016040117224114977a.png" />
						<img id="lbt_img2" src="../img/201612191444322d3b38.jpg" />
					</div>
				</div>
				<!--右边展示-->
				<div id="show">
					<img class="imgBig" src="../img/img/tbg3.png" />
					<img class="imgBig" src="../img/img/tbg2.png" />
					<img class="imgBig" src="../img/img/tbg1.png" />
					<img class="textBig" src="../img/img/t3.png" />
					<img class="textBig" src="../img/img/t2.png" />
					<img class="textBig" src="../img/img/t1.png" />
					<img class="textSmall" src="../img/img/w3.png" />
					<img class="textSmall" src="../img/img/w2.png" />
					<img class="textSmall" src="../img/img/w1.png" />
				</div>
			</div>
			<div id="footer">
				<div id="footer_pic">
					<a href="建议位置.html"><img src="../img/img/home-box-1_CN.jpg" /></a>
					<a href="美食.html"><img src="../img/img/home-box-2_CN.jpg" /></a>
					<a href="新闻动态.html"><img src="../img/img/home-box-3_CN.jpg" /></a>
					<a href="http://weibo.com/subwayrestaurantcn?is_hot=1"><img src="../img/img/weibo_CN.jpg" /></a>
					<a href="###" style="position: relative;"><img src="../img/img/weixin_CN.jpg" /></a>
					<span id="erweima"><img src="../img/2099963A-E268-466F-AD98-ABEDB455165E.png"/></span>
				</div>
				<p id="footer_a">
					<a href="1首页.html">主页|</a>
					<a href="美食.html">菜单/营养|</a>
					<a href="加盟流程.html">如何加盟|</a>
					<a href="关于我们.html">关于我们|</a>
					<a href="http://www.subway.com.cn/locator.aspx">快餐店位置查询</a><br />
					<a href="">联系我们|</a>
					<a href="http://www.subway.com.cn/terms.aspx">使用条款|</a>
					<a href="">隐私权政策|</a>
					<a href="">SUBWAY Partners™</a>
				</p>
				<p>SUBWAY® is a Registered Trademark of Subway IP Inc. <br /> ®2016 Subway IP Inc.</p>
			</div>
		</div>
		<script type="text/javascript">
			var left = document.getElementById("left");
			var right = document.getElementById("right")
			var imgArr = document.querySelectorAll("#lbt>img")
			var showImg = document.getElementById("show");
			var index = 0;
			var myImg = $("#lbt>img");
			var len = $("#lbt>img").length;
			//左侧轮播图
			$("#left").html("<");
			$("#right").html(">");
			var timer = setInterval(function() {
					$("#lbt_img1").fadeToggle(700);
				}, 1500)
				//鼠标移入停止计时器
			$("#lbt").mouseover(function() {
				clearInterval(timer);
			});
			//鼠标移出开始计时器
			$("#lbt").mouseleave(function() {
				clearInterval(timer);
				timer = setInterval(function() {
					$("#lbt_img1").fadeToggle(700);
				}, 1500)
			});
			$("#left, #right").click(function() {
				$("#lbt_img1").fadeToggle(700);
			});
			//左侧轮播图 按钮				
			$("#banner").hover(function() {
					$("#left").css({
						display: "block"
					})
					$("#right").css({
						display: "block"
					})
				}).mouseleave(function() {
					$("#left").css({
						display: "none"
					})
					$("#right").css({
						display: "none"
					})
				})
				//导航栏滑动		
			$("#lan").hover(function() {
					$("#slider").css({
						display: "block"
					})
					$("#slider").mouseleave(function() {
						$("#slider").css({
							display: "none"
						})
					})
				})
				//右侧轮播图		

			function show() {
				var i = 2;
				var a = ["url(../img/img/pic3.jpg)", "url(../img/img/pic2.jpg)", "url(../img/img/pic1.jpg)"];
				setInterval(function() {
					$(".imgBig").eq(i).animate({
						top: 0
					}, 1000, Fq)
				}, 10000);

				function Fq() {
					$(".textBig").eq(i).animate({
						left: 0
					}, 2000, Fw)
				}

				function Fw() {
					$(".textSmall").eq(i).animate({
						left: 0
					}, 2000, Fe)
				}

				function Fe() {
					$(".textBig").eq(i).animate({
						left: 288
					}, 2000, Fr)
				}

				function Fr() {
					$(".textBig").eq(i).css({
						left: -288
					})
					$(".textSmall").eq(i).animate({
						left: 288
					}, 2000, Ft)
				}

				function Ft() {
					$(".textSmall").eq(i).css({
						left: -288
					})
					$(".imgBig").eq(i).animate({
						top: -156
					}, 1000, Fy)
				}

				function Fy() {
					$("#show").animate({
						opacity: 0
					}, 1000, Fu)
				}

				function Fu() {
					i--;
					if(i < 0) {
						i = 2;
					}
					$("#show").css({
						opacity: 1,
					})
					showImg.style.background = a[i];
				}

			}
			show();
			//页脚 图片 二维码
			$("#footer_pic>a>img").eq(0).hover(function() {
				$(this).attr("src", "../img/home-box-1_CN_hover.jpg")
			}).mouseleave(function() {
				$(this).attr("src", "../img/img/home-box-1_CN.jpg")
			})
			$("#footer_pic>a>img").eq(1).hover(function() {
				$(this).attr("src", "../img/home-box-2_CN_hover.jpg")
			}).mouseleave(function() {
				$(this).attr("src", "../img/img/home-box-2_CN.jpg")
			})
			$("#footer_pic>a>img").eq(2).hover(function() {
				$(this).attr("src", "../img/home-box-3_CN_hover.jpg")
			}).mouseleave(function() {
				$(this).attr("src", "../img/img/home-box-3_CN.jpg")
			})
			$("#footer_pic>a>img").eq(3).hover(function() {
				$(this).attr("src", "../img/weibo_CN_hover.jpg")
			}).mouseleave(function() {
				$(this).attr("src", "../img/img/weibo_CN.jpg")
			})
			$("#footer_pic>a>img").eq(4).hover(function() {
					$(this).attr("src", "../img/weixin_CN_hover.jpg")
					$("#erweima").css({
						display: "block"
					})
				}).mouseleave(function() {
					$(this).attr("src", "../img/img/weixin_CN.jpg")
					$("#erweima").css({
						display: "none"
					})
				})
				// 国际化
			function selLanguage(obj) {
				$("#language>span").html(obj.country);
				$("#language>p>a").html(obj.worldWidle);
				$(".nav>li>a").eq(1).html(obj.navOne);
				$(".nav>li>a").eq(2).html(obj.navTwo);
				$(".nav>li>a").eq(3).html(obj.navThree);
				$(".nav>li>a").eq(4).html(obj.navFour);
				$(".nav>li>a").eq(5).html(obj.navFive);
				$("#slider>ul>li").eq(0).html(obj.navTwoFirst);
				$("#slider").eq(1).html(obj.navTwoSecond);
				$("#slider").eq(2).html(obj.navTwoThrid);
				$("#slider").eq(3).html(obj.navTwoForth);
				$("#slider").eq(4).html(obj.navTwoFifth);
				$("#slider").eq(5).html(obj.navTwoSixth);
				$("#slider").eq(6).html(obj.navTwoSeventh);
				$("#slider").eq(7).html(obj.navTwoEighth);
				$("#slider").eq(8).html(obj.navTwoNinth);
				$("#slider").eq(9).html(obj.navTwoTenth);
				$("#slider").eq(10).html(obj.navTwoEleventh);
				$("#footer_a>a").eq(0).html(obj.page);
				$("#footer_a>a").eq(1).html(obj.menu);
				$("#footer_a>a").eq(2).html(obj.join);
				$("#footer_a>a").eq(3).html(obj.about);
				$("#footer_a>a").eq(4).html(obj.positionSearch);
				$("#footer_a>a").eq(5).html(obj.contact);
				$("#footer_a>a").eq(6).html(obj.clause);
				$("#footer_a>a").eq(7).html(obj.policy);
			}

			function setLanguage(value) {
				var selectedOption = value.options[value.selectedIndex];
				if(selectedOption.value == "chn") {
					selLanguage(CHNObj);
					$("#footer_pic>a>img").eq(0).attr("src", "../img/img/home-box-1_CN.jpg")
					$("#footer_pic>a>img").eq(1).attr("src", "../img/img/home-box-2_CN.jpg")
					$("#footer_pic>a>img").eq(2).attr("src", "../img/img/home-box-3_CN.jpg")
					$("#footer_pic>a>img").eq(3).attr("src", "../img/img/weibo_CN.jpg")
					$("#footer_pic>a>img").eq(4).attr("src", "../img/img/weixin_CN.jpg")
					$("#footer_pic>a>img").eq(0).hover(function() {
						$(this).attr("src", "../img/home-box-1_CN_hover.jpg")
					}).mouseleave(function() {
						$(this).attr("src", "../img/img/home-box-1_CN.jpg")
					})
					$("#footer_pic>a>img").eq(1).hover(function() {
						$(this).attr("src", "../img/home-box-2_CN_hover.jpg")
					}).mouseleave(function() {
						$(this).attr("src", "../img/img/home-box-2_CN.jpg")
					})
					$("#footer_pic>a>img").eq(2).hover(function() {
						$(this).attr("src", "../img/home-box-3_CN_hover.jpg")
					}).mouseleave(function() {
						$(this).attr("src", "../img/img/home-box-3_CN.jpg")
					})
					$("#footer_pic>a>img").eq(3).hover(function() {
						$(this).attr("src", "../img/weibo_CN_hover.jpg")
					}).mouseleave(function() {
						$(this).attr("src", "../img/img/weibo_CN.jpg")
					})
					$("#footer_pic>a>img").eq(4).hover(function() {
						$(this).attr("src", "../img/weixin_CN_hover.jpg")
					}).mouseleave(function() {
						$(this).attr("src", "../img/img/weixin_CN.jpg")
					})
				} else if(selectedOption.value == "eng") {
					selLanguage(ENGObj);
					$("#footer_pic>a>img").eq(0).attr("src", "../img/home-box-1_EN.jpg")
					$("#footer_pic>a>img").eq(1).attr("src", "../img/home-box-2_EN.jpg")
					$("#footer_pic>a>img").eq(2).attr("src", "../img/home-box-3_EN.jpg")
					$("#footer_pic>a>img").eq(3).attr("src", "../img/weibo_EN.jpg")
					$("#footer_pic>a>img").eq(4).attr("src", "../img/weixin_EN.jpg")
					$("#footer_pic>a>img").eq(0).hover(function() {
						$(this).attr("src", "../img/img/1.jpg")
					}).mouseleave(function() {
						$(this).attr("src", "../img/home-box-1_EN.jpg")
					})
					$("#footer_pic>a>img").eq(1).hover(function() {
						$(this).attr("src", "../img/img/2.jpg")
					}).mouseleave(function() {
						$(this).attr("src", "../img/home-box-2_EN.jpg")
					})
					$("#footer_pic>a>img").eq(2).hover(function() {
						$(this).attr("src", "../img/img/3.jpg")
					}).mouseleave(function() {
						$(this).attr("src", "../img/home-box-3_EN.jpg")
					})
					$("#footer_pic>a>img").eq(3).hover(function() {
						$(this).attr("src", "../img/img/weibo_EN_hover.jpg")
					}).mouseleave(function() {
						$(this).attr("src", "../img/weibo_EN.jpg")
					})
					$("#footer_pic>a>img").eq(4).hover(function() {
						$(this).attr("src", "../img/img/weixin_EN_hover.jpg")
					}).mouseleave(function() {
						$(this).attr("src", "../img/weixin_EN.jpg")
					})
					$(".textSmall").attr("src", "../img/w2.png")
					$(".textBig").attr("src", "../img/t2.png")
				}
			}
		</script>
	</body>

</html>